<template>
  <div class="change-password">
    <h3>更改密码</h3>
    <form @submit.prevent="handleChangePassword">
      <div class="form-group">
        <label for="old-password">旧密码:</label>
        <input
            type="password"
            id="old-password"
            v-model="oldPassword"
            placeholder="请输入旧密码"
            required
        />
      </div>
      <div class="form-group">
        <label for="new-password">新密码:</label>
        <input
            type="password"
            id="new-password"
            v-model="newPassword"
            placeholder="请输入新密码"
            required
        />
      </div>
      <div class="form-group">
        <label for="confirm-password">确认新密码:</label>
        <input
            type="password"
            id="confirm-password"
            v-model="confirmPassword"
            placeholder="请确认新密码"
            required
        />
      </div>
      <BaseButton variant="primary" size="large" type="submit">更改密码</BaseButton>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import BaseButton from '@/components/BaseButton.vue'
import axios from '@/axios'

// 定义响应式数据
const oldPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')

// 提交表单时调用此函数
const handleChangePassword = async () => {
  // 检查新密码和确认密码是否一致
  if (newPassword.value !== confirmPassword.value) {
    alert('新密码和确认密码不一致，请重新输入！')
    return
  }

  // 请求更新密码
  try {
    const response = await axios.patch('/user/updatePwd', {
      old_pwd: oldPassword.value,
      new_pwd: newPassword.value,
      re_pw: confirmPassword.value
    },
    {
      headers: {
        'Content-Type': 'application/json'
      }
    })
    if (response.data.code === 0) {
      alert('密码更改成功！')
      // 清空表单
      oldPassword.value = ''
      newPassword.value = ''
      confirmPassword.value = ''
    } else {
      alert('密码更改失败：' + response.data.message)
    }
  } catch (error) {
    console.error('更改密码请求失败:', error)
    alert('更改密码时出错，请稍后再试！')
  }
}
</script>

<style scoped>
.change-password {
  height: 100vh;
  width: 60%;
  margin: var(--spacing-large) auto;
  padding: var(--spacing-large);
}

.change-password h3 {
  text-align: center;
  margin-bottom: var(--spacing-large);
  color: var(--primary-color);
}

.form-group {
  margin-bottom: var(--spacing-large);
  display: flex;
  flex-direction: column;
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-small);
  font-weight: 600;
  color: var(--text-color);
}

.form-group input {
  width: 100%;
  padding: var(--spacing-small);
  border: 1px solid #bdc3c7;
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.form-group input:focus {
  border-color: var(--secondary-color);
  outline: none;
}

/* 使用 BaseButton 组件 */
button {
  width: 100%;
  padding: var(--spacing-small);
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: var(--font-size-large);
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: var(--secondary-color);
}
</style>
